<template>
  <div class="index-main">
    <el-row
      v-show="isAuthMoney"
      class="index-sky3"
      :gutter="0"
      type="flex"
      justify="center"
    >
      <el-col :span="8">
        <div class="current-month">
          <p>本月回款总金额</p>
          <em v-show="isAuthMoneyTag">{{ Bill.authMoneyTag || '本人' }}</em>
          <CountTo
            class="rmb"
            :start-val="0"
            :end-val="Bill.monthReturnedMoney"
            :duration="2600"
          />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="current-case">
          <p>当前案件回款总金额</p>
          <em v-show="isAuthMoneyTag">{{ Bill.authMoneyTag || '本人' }}</em>
          <CountTo
            class="rmb"
            :start-val="0"
            :end-val="Bill.currentReturnedMoney"
            :duration="2600"
          />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="current-delegate">
          <p>当前委案总金额</p>
          <em v-show="isAuthMoneyTag">{{ Bill.authMoneyTag || '本人' }}</em>
          <CountTo
            class="rmb"
            :start-val="0"
            :end-val="Bill.currentAuthorizeMoney"
            :duration="2600"
          />
        </div>
      </el-col>
    </el-row>
    <el-row
      class="index-cont"
      :gutter="0"
      type="flex"
      justify="center"
    >
      <el-col :span="10">
        <div :class="{'chart-hour': true, 'not-available': !isCoverRateLink, 'no-auth': !isNoAuth, 'case-cover-chart': true}">
          <div class="title">
            案件覆盖率统计表 <i v-if="this.caseCoverRateScope!==''">{{ ['小组', '部门', '机构'][this.caseCoverRateScope] }}</i>
          </div>
          <el-button
            v-show="isCoverRateLink"
            v-waves
            class="t-view"
            type="cancel"
            @click="route_statCase"
          >
            查看
          </el-button>
          <!-- <pie-chart :sum-case="isCoverRateLink?coverCaseChartData:{}" class="major-case"></pie-chart> -->
          <p
            v-show="isCoverRateLink"
            class="last-time"
          >
            上次更新时间：{{ lastTime }}
          </p>
          <p
            v-show="!isCoverRateLink"
            class="na-text"
          >
            {{ caseCoverText }}
          </p>
        </div>
      </el-col>
      <el-col :span="10">
        <div :class="{'chart-hour': true, 'not-available-avg': !isAvgEfficientLink, 'no-data-avg': !isAvgEfficientData}">
          <div class="title">
            案件平均处理时效统计表 <i v-if="this.caseCoverRateScope!==''">{{ ['小组', '部门', '机构'][this.caseCoverRateScope] }}</i>
            <el-select
              v-if="isSwitchHourReport"
              v-model="caseHourReportType"
              class="filter-item"
              placeholder="请选择"
              @change="switchCaseHourReport"
            >
              <el-option
                v-for="item in caseHourOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button
            v-show="isAvgEfficientLink"
            v-waves
            class="t-view"
            type="cancel"
            @click="route_efficientAvg"
          >
            查看
          </el-button>
          <!-- <bar-chart v-show="isAvgEfficientLink" :chart-data="avgEfficientChartData" width="465px" height="280px" class="major-case"></bar-chart> -->
          <p
            v-show="isAvgEfficientLink"
            class="last-time"
          >
            上次更新时间：{{ lastavgEfficientTime }}
          </p>
          <p
            v-show="!isAvgEfficientLink"
            class="na-text"
          >
            {{ caseHourText }}
          </p>
        </div>
      </el-col>
      <el-col
        :span="5"
        class="v1-block"
      >
        <el-row>
          <div class="grid-content bg-purple">
            <h2>待办任务</h2>
            <div class="reminder">
              <p
                v-show="!isCollectOnly"
                class="is-zero-task"
              >
                当前无待办任务
              </p>
              <p v-show="isCollectOnly">
                当前有<CountTo
                  :class="{'card-panel-num': true, 'is-count-collect': payBackNum > 0}"
                  :start-val="0"
                  :end-val="payBackNum"
                  :duration="2600"
                  @click.native="payBackNumHandler"
                />件待催收案件。
              </p>
              <p v-show="isCollectOnly">
                今日有<CountTo
                  :class="{'card-panel-num': true, 'is-count-follow': followNum > 0}"
                  :start-val="0"
                  :end-val="followNum"
                  :duration="2600"
                  @click.native="followNumHandler"
                />件待跟进案件。
              </p>
            </div>
          </div>
        </el-row>
        <el-row>
          <div class="grid-content bg-purple">
            <h2 class="shortcut">
              快捷功能
            </h2>
            <span
              v-show="isShortcut"
              class="no-shortcut"
            >当前无可用快捷功能</span>
            <p class="btns">
              <el-button
                v-show="isShortcut_taskList"
                v-waves
                class="short"
                type="primary"
                @click="route_taskView"
              />
              <el-button
                v-show="isShortcut_historyTaskManage"
                v-waves
                class="short history"
                @click="route_historyTaskManage"
              />
            </p>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import waves from '@/directive/waves/index.js'
import { userTodo, reportAvgEfficiencyHome } from '@/api/login'
import CountTo from 'vue-count-to'
// import { mapGetters } from 'vuex'
import { UserModule } from '@/store/modules/user'
import { reportCoverHome } from '@/api/statReport'
import { userPayment } from '@/api/bill'
// import PieChart from '@/views/statReport/components/PieChart'
// import BarChart from '@/views/statReport/components/BarChart'
export default {
  name: 'SkBlock',
  components: {
    CountTo
    // PieChart,
    // BarChart
  },
  computed: {
    // ...mapGetters([
    //   'roles',
    //   'pendingCase',
    //   'name'
    // ])
  },
  // directives: {
  //     waves
  // },
  data() {
    return {
      roles: [],
      pendingCase: {},
      name: '',
      payBackNum: 0,
      followNum: 0,
      isShortcut: false,
      isShortcut_taskList: true,
      isShortcut_historyTaskManage: true,
      isPendingTask: true,
      isCollectOnly: false,
      isCoverRateLink: false,
      caseCoverRateScope: '',
      isAvgEfficientLink: false,
      isAvgEfficientData: true,
      isNoAuth: false,
      isDispatchers: false,
      caseCoverText: '当日无报表',
      coverCaseChartData: {
        backgroundColor: '#ffffff',
        title: {
          text: '案件总计',
          left: 108,
          top: 152,
          textStyle: {
            fontSize: 14,
            color: '#5B5D5F'
          }
          // subtext: 'test',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          // type: 'scroll',
          // pageIconColor: 'black',
          // pageIconSize: 11,
          right: 20,
          top: 80,
          bottom: 10,
          // left: 'right',
          // selectedMode: 'single',
          data: [],
          textStyle: {
            color: '#5B5D5F',
            fontSize: 11
          }
          /* selected: {
                        '未触达案件数': true,
                        '案件触达1次数量': false
                    } */
        },
        calculable: true,
        series: [{
          name: '案件总计',
          type: 'pie',
          clockwise: false,
          // selectedOffset: 30,
          // minAngle: 10,
          itemStyle: {
            // shadowColor: 'rgba(212,217,218,0.44)',
            shadowColor: 'rgba(0,0,0,0.24)',
            shadowBlur: 15
            // borderWidth: 10,
            // borderType: 'solid',
            // borderColor: 'inherit'
          },
          roseType: 'radius',
          radius: [55, 105],
          center: ['30%', '55%'],
          label: {
            formatter: '{d}%',
            fontSize: 11,
            position: 'inside'
          },
          data: [],
          animationEasing: 'cubicInOut',
          animationDuration: 2600
        }],
        color: ['#87C9FF', '#879DFF', '#9A87FF', '#CD99FF', '#D477C0', '#B15E97', '#B15E77', '#994949', '#546570', '#DAC53E', '#B9DA3E']
      },
      avgEfficientChartData: {
        unitNames: [],
        cases: [],
        validConnections: [],
        validConnectedCustomers: [],
        ptp: []
      },
      legendArr: ['未触达案件数', '案件触达1次数量', '案件触达2次数量', '案件触达3次数量', '案件触达4次数量', '案件触达5次数量', '案件触达5+次数量'],
      lastTime: '0000-00-00',
      lastavgEfficientTime: '0000-00-00',
      Bill: {
        monthReturnedMoney: 0,
        currentReturnedMoney: 0,
        currentAuthorizeMoney: 0,
        authMoneyTag: ''
      },
      isAuthMoneyTag: false,
      isAuthMoney: false,
      caseHourOptions: [{
        value: 1,
        label: '前三名'
      }, {
        value: 0,
        label: '后三名'
      }],
      isSwitchHourReport: true,
      caseHourText: '敬请期待',
      caseHourReportType: 1,
      reportBaseId: ''
    }
  },
  created() {
    // const roles = UserModule.roles
    console.warn('SkBlock - UserModule:', UserModule)
  },
  mounted() {
    this.caseManRoutes = this.$router.options.routes[6]
    this.isPendingTask = this.roles.includes('org_manager') || this.roles.includes('collector')
    this.isCollectOnly = this.roles.includes('collector')
    this.isShortcut = true
    this.isShortcut_taskList = false
    this.isShortcut_historyTaskManage = false
    this.isDispatchers = this.roles.includes('dispatcher') || this.roles.includes('sky_advanced_dispatcher')
    if (this.roles.includes('case_manager')) {
      this.isShortcut = false
      this.isShortcut_taskList = true
      this.isShortcut_historyTaskManage = true
    }
    // (1 << this.roles.length) - 1
    if (this.roles.join(',') === 'collector' || this.roles.join(',') === 'dispatcher' || this.roles.join(',') === 'sky_advanced_dispatcher' || this.roles.sort().join(',') === 'collector,dispatcher' || this.roles.sort().join(',') === 'collector,sky_advanced_dispatcher' || this.roles.sort().join(',') === 'dispatcher,sky_advanced_dispatcher' || this.roles.sort().join(',') === 'collector,dispatcher,sky_advanced_dispatcher') {
      this.isShortcut = false
      this.isShortcut_taskList = true
      this.isShortcut_historyTaskManage = false
    }
    if (this.roles.join(',') === 'org_manager') {
      this.isPendingTask = false
      this.isShortcut = true
      this.isShortcut_taskList = false
      this.isShortcut_historyTaskManage = false
    }
    // v1.4
    this.isAuthMoney = this.roles.includes('case_manager') || this.isDispatchers || this.roles.includes('collector')
    this.getUserPaymentCollection()
    this.reportChartCoverHome()
    this.reportChartAvgEfficiencyHome()
    this.todoEvents()
    this.pendingCase.obj = {
      name: this.name
    }
    console.error('SkBlock - UserModule:', UserModule)
  },
  methods: {
    getUserPaymentCollection() {
      this.loading = true
      userPayment({}).then(response => {
        this.loading = false
        console.log('getUserPaymentCollection Response:', response)
        if (!response) return
        // this.Bill.monthReturnedMoney = response.monthReturnedMoney || this.Bill.monthReturnedMoney
        // this.Bill.currentReturnedMoney = response.currentReturnedMoney || this.Bill.currentReturnedMoney
        // this.Bill.currentAuthorizeMoney = response.currentAuthorizeMoney || this.Bill.currentAuthorizeMoney
        this.Bill.monthReturnedMoney = response.monthReturnedMoney
        this.Bill.currentReturnedMoney = response.currentReturnedMoney
        this.Bill.currentAuthorizeMoney = response.currentAuthorizeMoney
        this.Bill.authMoneyTag = response.authMoneyTag
        this.isAuthMoneyTag = !!this.Bill.authMoneyTag
      })
        .catch(err => {
          this.$message.error(err && err.resultMsg || '获取回款失败,请重新上传！')
        })
    },
    reportChartCoverHome() {
      this.loading = true
      reportCoverHome({}).then(response => {
        this.loading = false
        console.log('reportCoverHome Response:', response)
        if (!response || response.resultCode === 204) {
          localStorage.clear()
          this.isCoverRateLink = false
          this.caseCoverText = response.resultMsg
          return
        }
        if (!response || [203, 205].includes(response.resultCode)) {
          // localStorage.clear()
          // this.isCoverRateLink = false
          this.caseCoverText = response.resultMsg
          return
        }
        const valueArr = Object.values(response.commonCase)
        if (!valueArr.reduce((a, b) => {
          return a + b
        })) {
          this.caseCoverText = ''
          this.isNoAuth = true
          return
        }
        this.caseCoverRateScope = response.scope
        this.isCoverRateLink = true
        this.legendArr = this.legendArr.map((m, i) => {
          return {
            name: m,
            icon: 'circle',
            textStyle: {
              fontSize: 11
            }
          }
        })
        this.coverCaseChartData.legend.data = this.legendArr
        const _skyTrace = localStorage.skyTrace ? JSON.parse(localStorage.skyTrace) : {}
        localStorage.setItem('skyTrace', JSON.stringify(Object.assign(_skyTrace, {
          homeReportId: response.reportId
        })))
        this.lastTime = response.statisticDate
        this.coverCaseChartData.series[0].data = valueArr.map((m, i) => {
          return {
            value: m,
            name: this.legendArr[i].name,
            label: {
              show: false
            }
          }
        })
        this.coverCaseChartData.series[0].data = valueArr.map((m, i) => {
          if (m === 0) {
            return
          }
          return {
            value: m,
            name: this.coverCaseChartData.legend.data[i].name,
            label: {
              show: m !== 0
            }
          }
        })
      })
        .catch(err => {
          console.log('err -- reportChartCoverHome:', err)
          this.$message.error(err && err.resultMsg || '获取覆盖率报表数据失败！')
        })
    },
    switchCaseHourReport(val) {
      console.log('switchCaseHourReport:', val)
      this.caseHourReportType = val
      this.reportChartAvgEfficiencyHome()
    },
    reportChartAvgEfficiencyHome() {
      reportAvgEfficiencyHome({}).then(response => {
        this.loading = false
        const response1 = JSON.parse('[{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"管理部门","unitId":43,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":25.88,"validConnections":44.1,"validConnectedCustomers":25.88,"ptp":0.0},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"dzz的部门","unitId":44,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.1,"cases":24.7,"validConnections":45.8,"validConnectedCustomers":24.7,"ptp":15.3},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"dzz的部门2","unitId":53,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":10.0,"cases":98.88,"validConnections":88.88,"validConnectedCustomers":66.66,"ptp":28.88},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"dzz的部门3","unitId":55,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":null,"validConnections":null,"validConnectedCustomers":null,"ptp":null},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"dzz的部门4","unitId":57,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":null,"validConnections":null,"validConnectedCustomers":null,"ptp":null},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"新增的部门5","unitId":61,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":null,"validConnections":null,"validConnectedCustomers":null,"ptp":null},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"预发测试","unitId":62,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":null,"validConnections":null,"validConnectedCustomers":null,"ptp":null},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"--","unitId":71,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":null,"validConnections":null,"validConnectedCustomers":null,"ptp":null},{"reportBaseId":3200,"isAggr":false,"aggrName":"本机构","unitName":"--","unitId":74,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.0,"cases":null,"validConnections":null,"validConnectedCustomers":null,"ptp":null},{"reportBaseId":3200,"isAggr":true,"aggrName":"本机构","unitName":"总计","unitId":null,"teamId":null,"teamName":null,"deptName":null,"createTime":1547656201000,"statisticDate":"2019-01-16","totalTime":0.2,"cases":22.7,"validConnections":45.4,"validConnectedCustomers":22.7,"ptp":11.3}]')
        console.log('reportChartAvgEfficiencyHome Response:', response1)
        if (!response || [203, 204, 205].includes(response.resultCode)) {
          this.caseHourText = response.resultMsg
          return
        }
        if (!response || response.resultCode !== 200) return
        this.loading = true
        this.isAvgEfficientLink = true
        // '{"homeReportId":3200,"scope":2,"homePieReportId":43973}'
        this.reportBaseId = response[0].reportBaseId
        this.lastavgEfficientTime = response[0].statisticDate
        const filterAggrArray = response.filter(m => !m.isAggr)
        const begin3Array = filterAggrArray.slice(0, 3)
        // const end3Array = filterAggrArray.slice(filterAggrArray.length - 3, filterAggrArray.length)
        const end3Array = filterAggrArray.reverse().slice(0, 3)
        const beginOrEnd3Array = this.caseHourReportType ? begin3Array : end3Array
        const barObject = arr => {
          const _obj = {
            unitNames: arr.map(m => m.unitName),
            cases: arr.map(m => m.cases),
            validConnections: arr.map(m => m.validConnections),
            validConnectedCustomers: arr.map(m => m.validConnectedCustomers),
            ptp: arr.map(m => m.ptp)
          }
          return {
            isData: [..._obj.cases, ..._obj.validConnections, ..._obj.validConnectedCustomers, ..._obj.ptp].some(m => typeof m === 'number'),
            obj: _obj
          }
        }
        this.avgEfficientChartData = barObject(beginOrEnd3Array).obj
        this.isAvgEfficientData = barObject(filterAggrArray).isData
        this.isSwitchHourReport = barObject(filterAggrArray)
        // this.isSwitchHourReport = barObject([...begin3Array, ...end3Array])
        // const mockUnitArray = Array.from({ length: 3 }, (v, i) => `催收员${i}`)
        // const mockHourArray = a => Array.from({ length: 3 }, n => (Math.random() * 1e3) | 0)
        // this.avgEfficientChartData = {
        //     unitNames: mockUnitArray,
        //     cases: mockHourArray(),
        //     validConnections: mockHourArray(),
        //     validConnectedCustomers: mockHourArray(),
        //     ptp: mockHourArray()
        // }
      }).catch(err => {
        console.log('err -- reportChartAvgEfficiencyHome:', err)
        this.$message.error(err && err.resultMsg || '获取平均处理时效统计表失败！')
      })
    },
    todoEvents() {
      this.loading = true
      userTodo({}).then(response => {
        this.loading = false
        console.log('userTodo Response:', response)
        this.payBackNum = response.toCollectCount || 0
        this.followNum = response.toFollowCount || 0
        // this.isPendingTask = !(this.payBackNum || this.followNum)
      })
        .catch(err => {
          this.$message.error(err && err.resultMsg || '获取代办任务失败,请重新上传！')
        })
    },
    payBackNumHandler() {
      if (this.payBackNum) {
        this.route_taskView()
        this.pendingCase.obj.payBackNum = this.payBackNum
      }
    },
    followNumHandler() {
      if (this.followNum) {
        this.route_taskView()
        this.pendingCase.obj.followNum = this.followNum
      }
    },
    /* route_paymentCollect() {
            this.$router.push({
                path: `/statReport/bill_payment`
            })
        }, */
    route_statCase() {
      this.$router.push({
        path: `/statReport/stat_case`
      })
    },
    route_efficientAvg() {
      console.log('route_efficientAvg')
      const _skyTrace = localStorage.skyTrace ? JSON.parse(localStorage.skyTrace) : {}
      localStorage.setItem('skyTrace', JSON.stringify(Object.assign(_skyTrace, {
        homeReportId: this.reportBaseId
      })))
      this.$router.push({
        path: `/statReport/hour`
      })
    },
    route_taskView() {
      // const _roles = this.$store.getters.roles
      // this.$store.dispatch('', this.$router)
      // console.log('vuex_roles:', this.roles)
      this.$router.push({
        path: this.caseManRoutes.redirect
      })
    },
    route_historyTaskManage() {
      this.$router.push({
        // path: this.caseManRoutes.path + '/' + this.caseManRoutes.children[1].path
        path: '/caseManage/historyTaskManage'
      })
      // this.$store.dispatch('', this.$router)
      // this.loading = true
      /* this.$store.dispatch('SkMenuView', {}).then(() => {
                this.loading = false
                this.$router.push({
                    path: this.caseManRoutes.redirect
                })
            }).catch(() => {
                this.loading = false
            }) */
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.index-main{
    position: relative;
    .index-sky3{
        // display: block;
        // background: white;
        text-align: center;
        position: absolute;
        top: -300px;
        left: 350px;
        width: 810px;
        p{
            text-align: left;
            padding: 0 0 0 10px;
        }
        span{
            display: block;
            font-size: 27px;
            font-family: 'Arial Black';
            margin: 40px 5px 5px 0px;
            font-weight: bold;
            color: white;
            padding: 0 10px;
            &:after{
                content: '元';
                font-size: 14px;
                // color: rgba(255,255,255,.5);
            }
        }
        .el-col{
            width: 220px;
            height: 115px;
            margin: 0 50px 0 0;
            background-size: 100% auto;
            position: relative;
            p{
                position: absolute;
                color: #fff;
                font-size: 15px;
                top: -6px;
                left: 20px;
            }
            em{
                content: '';
                font-size: 12px;
                font-style: normal;
                color: #161616;
                position: absolute;
                top: 0;
                right: 0;
                width: 35px;
                height: 22px;
                line-height: 22px;
                border-bottom-left-radius: 10px;
                border-top-right-radius: 7px;
            }
            &:nth-child(1){
                // background: rgba(24,34,47,.7);
                background-image: url(../../../assets/bill/index1_month_return.png);
                span:after{
                    // color: rgba(49,84,130,1);
                    // color: #315482;
                    color: #fff;
                }
                // authMoneyTag
                em{ background: #9ac5fd; }
            }
            &:nth-child(2){
                // background: rgba(33,22,40,.7);
                background-image: url(../../../assets/bill/index2_current_case.png);
                span:after{
                    // color: rgba(87,56,108,1);
                    // color: #57386c;
                    color: #fff;
                }
                em{ background: #d8b1f2; }
            }
            &:nth-child(3){
                // background: rgba(40,29,18,.7);
                background-image: url(../../../assets/bill/index3_current_auth.png);
                span:after{
                    // color: rgba(92,68,44,1);
                    // color: #5c442c;
                    color: #fff;
                }
                em{ background: #d6a97c; }
            }
        }
    }
}
.el-row, .index-cont {
    margin: 20px 0 0 0;
    overflow: hidden;
    &.index-cont{
        padding-bottom: 20px;
    }
    // position: relative;
    .chart-stat-case, .chart-hour{
        width: 480px;
        margin: 0 10px 0 0;
        height: 370px;
        background: white;
        padding-top: 35px;
        position: relative;
        .title{
            font-size: 18px;
            font-weight: bolder;
            color: #4C4C4C;
            letter-spacing: 1.07px;
            position: absolute;
            left: 20px;
            top: 20px;
            font-family: 'MicrosoftYaHeiUI-Bold';
            z-index: 999;
            &:before{
                content: '';
                position: absolute;
                left: -20px;
                top: 1px;
                width: 10px;
                height: 50px;
                background: white;
            }
            i{
                font-size: 12px;
                font-style: normal;
                background: #9ac5fd;
                color: white;
                padding: 4px 5px;
                margin: -3px 0 0px 0;
                display: inline-block;
                letter-spacing: normal;
                vertical-align: middle;
                border-radius: 8px;
                border-top-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
        .t-view{
            position: absolute !important;
            top:12px;
            right: 15px;
            background: #F1F2F6;
            border: none;
            border-radius: 8px;
            width: 80px;
            height: 35px;
            font-size: 14px;
            color: #18191A;
            letter-spacing: 2px;
            z-index: 999;
          }
          .last-time{
            font-family: 'MicrosoftYaHeiUI';
            font-size: 11px;
            color: #5B5D5F;
            letter-spacing: 0.59px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom:5px;
          }
          .na-text{
            font-family: 'MicrosoftYaHeiUI';
            font-size: 20px;
            font-weight: bold;
            color: rgb(35, 182, 255);
            letter-spacing: 0.59px;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%, -50%);
          }
        .case-cover-chart{}
    }
    @keyframes invalid_anmi {
        0%   { opacity: 0; }
        // 80%   { opacity: 0; }
        100%   { opacity: 1; }
    }
    .not-available, .no-auth, .not-available-avg{
        background-size: auto 82%;
        background-repeat: no-repeat;
        background-position: center bottom;
        transition: ease .5s opacity;
        animation: invalid_anmi 1s linear 1;
    }
    .not-available{
        background-size: auto 60%;
        background-position-y: 60%;
        background-image: url(../../../assets/stat_report/report_nodata.gif);
    }
    .no-data-avg{
        &:after{
            content: '';
            position: absolute;
            top: 45px;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 1;
            background-size: 85%;
            background-repeat: no-repeat;
            background-position: center center;
            // background-image: url(../../../assets/stat_report/report_nodata.gif) !important;
            background-image: url(../../../assets/stat_report/report_nodata_avg.png);
        }
        /* .filter-item,  */
        .major-case, .el-button, .last-time { display: none; }
    }
    .no-auth{
        background-size: auto 68%;
        background-position-y: 68%;
        background-image: url(../../../assets/stat_report/index_no_report.gif);
    }
    .not-available-avg{
        background-image: url(../../../assets/stat_report/index_hour.gif);
    }
    .is-zero-task, .no-shortcut{
        margin-top: 55px;
    }
    .no-shortcut{ display: inherit; }
    &:last-child {
      margin-bottom: 0;
    }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
    h2{
        padding: 0 0 0 20px;
        position: relative;
        &:before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 16px;
            height: 16px;
            background-size: auto 100%;
            background-repeat: no-repeat;
            background-image: url(../../../assets/icons/index_pending.gif);
        }
        &.shortcut:before{
            background-image: url(../../../assets/icons/index_shortcut.gif);
        }
        &:after{
            display: none;
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            left: 0;
            bottom: -10px;
            background: #7A7E80;
        }
    }
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .v1-block{
    margin: 0;
    .el-row{
        margin: 0 0 10px 0;
        .grid-content {
            // border-radius: 4px;
            // width: 220px;
            height: 180px;
            overflow: hidden;
            padding: 12px 0 0 20px;
            h2{
                margin-bottom: 24px;
                font-size: 18px;
                font-weight: normal;
            }
            p{
                color: #494B4D;
                font-size: 14px;
                margin: 0 0 7px 0;
                span{
                    color: red;
                    font-size: 22px;
                    font-weight: bold;
                    font-family: 'Arial';
                    vertical-align: sub;
                    margin: 0 3px 0 0px;
                    padding: 0 0 0 4px;
                    &.is-count-collect, &.is-count-follow{
                        cursor: pointer;
                        &:hover{
                            // color: #fff;
                            text-decoration: underline;
                            // background-color: red;
                        }
                    }
                }
            }
            .btns{
                margin: 3px 0px 7px -17px;
            }
        }
    }
  }
  .short{
    width: 100px;
    height: 80px;
    text-align: center;
    background: transparent;
    color: #939799;
    font-size: 14px;
    border: 1px solid #F1F2F6;
    border-radius: 4px;
    position: relative;
    margin: 0 2px;
    &:before{
        content: '';
        position: absolute;
        width: 26px;
        height: 26px;
        left: 35px;
        top: 13px;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-image: url(../../../assets/icons/index_task_list.gif);
    }
    &.history:before{
        background-image: url(../../../assets/icons/index_task_manage.gif);
    }
    &:after{
        content: '任务查看';
        position: absolute;
        left: 20px;
        bottom: 20px;
    }
    &.history:after{
        content: '历史任务管理';
        left: 7px;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
    .major-case {
        margin: 20px 0 0 0;
    }
}
</style>

<style rel="stylesheet/scss" lang="scss">
.index-main{
    .filter-item{
        width: 88px;
        margin: -6px 0 0 6px;
        .el-input__inner{
            height: 30px !important;
        }
    }
}
</style>
